<template>
  <div id="projects">
    <div class="wrapper">
      <top-bar></top-bar>
      <top-header></top-header>
      <div class="main">
        <div class="choose-box">
          <div class="choose-item">
            项目名称：
            <el-input placeholder="请输入关键字"
                      v-model="projectName"
                      clearable></el-input>
          </div>
          <div class="choose-item">
            项目阶段：
            <el-select v-model="phaseCode"
                       placeholder="请选择">
              <el-option label="全部"
                         value=""></el-option>
              <el-option v-for="item in phaseArr"
                         :key="item.key"
                         :label="item.value"
                         :value="item.key">
              </el-option>
            </el-select>
          </div>
          <div class="choose-item">
            项目等级：
            <el-select v-model="levelCode"
                       placeholder="请选择">
              <el-option label="全部"
                         value=""></el-option>
              <el-option v-for="item in lvArr"
                         :key="item.key"
                         :label="item.value"
                         :value="item.key">
              </el-option>
            </el-select>
          </div>
          <div class="choose-item">
            项目类型：
            <el-select v-model="typeCode"
                       placeholder="请选择">
              <el-option label="全部"
                         value=""></el-option>
              <el-option v-for="item in typeArr"
                         :key="item.key"
                         :label="item.value"
                         :value="item.key">
              </el-option>
            </el-select>
          </div>
          <div class="choose-btn"
               @click="findinformList">查询</div>
        </div>
        <div class="main-box">
          <div class="main-desc">
            项目阶段说明：
            <div class="desc-item">
              <span class="item-icon orange"></span>需求评估
            </div>
            <div class="desc-item">
              <span class="item-icon red"></span>设计阶段</div>
            <div class="desc-item">
              <span class="item-icon bule"></span>手板阶段</div>
            <div class="desc-item">
              <span class="item-icon green"></span>开模样机</div>
            <div class="desc-item">
              <span class="item-icon yellow"></span>小批量验证</div>
            <div class="desc-item">
              <span class="item-icon pink"></span>批量生产</div>
          </div>
          <div class="item-wrapper"
               v-loading="loading">
            <router-link :to="{ path:'/projects/project',query:{'id': item.id} }"
                         tag="div"
                         class="item-box"
                         v-for="(item, index) in projectList"
                         :key="index">
              <div class="item-img">
                <div :style="{backgroundImage:'url(' +item.imageUrls[0].url+')'}"
                     class="img"></div>
                <div class="item-state"
                     :class="getColor(item.phaseName)">{{ item.efficiencyName }}</div>
              </div>
              <div class="item-msg"
                   style="font-family: Times New Roman;">
                <p class="msg-list over-hidden"
                   style="width: 85%;">项目名称：
                  <span class="list-sub">{{ item.projectName }}</span>
                </p>
                <p class="msg-list">项目阶段：
                  <span class="list-sub"
                        :class="getColor(item.phaseName)">
                    <span class="item-icon"
                          :class="getColor(item.phaseName)"></span>{{ item.phaseName }}</span>
                </p>
                <p class="msg-list">项目类型：
                  <span class="list-sub">{{ item.typeName }}</span>
                </p>
                <p v-if="list.title&&index1<2"
                   class="msg-list over-hidden"
                   v-for="(list,index1) in item.projectTimes"
                   :key="index1">{{list.title}}：
                  <span class="list-sub">{{ getTime(list.startTime) }}至{{ getTime(list.endTime) }}</span>
                </p>

                <!-- <p class="msg-list" v-if="item.projectTimes[1]">开机模样：<span class="list-sub">{{ getTime(item.projectTimes[1].startTime) }}至{{ getTime(item.projectTimes[1].endTime) }}</span></p> -->
                <!-- <p class="msg-list">项目组别：<span class="list-sub">{{ item.groupName }}</span></p> -->
                <div class="lv">
                  <div class="lv-icon"
                       :class="getLv(item.levelName)"></div>
                  <span class="lv-desc">{{ item.levelName }} 级</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <bottom-tab class="bottom-bar"></bottom-tab>
    <router-view></router-view>
  </div>
</template>

<script>
import topBar from '@/components/top-bar'
import topHead from '@/components/top-head'
import bottomTab from '@/components/bottom-tab'
import $ from 'jquery'

let CONSTANT = require('../../constant/constant.js')
let common = require('../../common.js')

export default {
  components: {
    'top-bar': topBar,
    'top-header': topHead,
    'bottom-tab': bottomTab
  },
  data() {
    return {
      projectName: '',
      phaseCode: '',
      levelCode: '',
      typeCode: '',
      options: [
        {
          name: '新兴产业'
        },
        {
          name: '老旧产业'
        },
        {
          name: '可发展产业'
        }
      ],
      phaseArr: [],
      lvArr: [],
      typeArr: [],
      projectList: [],
      loading: true,
      pageIndex: 1,
      pageSize: 12,
      pageCount: ''
    }
  },
  mounted() {
    this.getinformList() //分页获取资讯列表
    this.getDictArr()
    var self = this
    $('#projects').scroll(function() {
      // console.log($("#projects"));
      var pheight = $('#projects')[0].scrollHeight //获取页面高度
      var sheight = $('#projects')[0].offsetHeight //获取滚动条高度，[0]是为了把jq对象转化为js对象
      var stop = $('#projects').scrollTop() //滚动条距离顶部的距离
      if (stop >= pheight - sheight-200) {
        //当滚动条到顶部的距离等于滚动条高度减去窗口高度时
        // queryMailList();
        self.getMoreInform()
        // console.log("到底了！");
      }
    })
  },
  methods: {
    getDictArr() {
      let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY
      let data = {}
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.phaseArr = res.data.bussData.phase
        this.lvArr = res.data.bussData.level
        this.typeArr = res.data.bussData.projectType
      })
    },
    getTime(time) {
      return time.slice(0, 10)
    },
    getLv(level) {
      switch (level) {
        case 'A':
          return 'lv-a'
          break
        case 'B':
          return 'lv-b'
          break
        case 'C':
          return 'lv-c'
          break
        case 'D':
          return 'lv-d'
          break
        case 'S':
          return 'lv-s'
          break
      }
    },
    getColor(name) {
      switch (name) {
        case '需求评估':
          return 'orange'
          break
        case '设计':
          return 'red'
          break
        case '手板':
          return 'blue'
          break
        case '开模样机':
          return 'green'
          break
        case '小批量验证':
          return 'yellow'
          break
        case '批量生产':
          return 'pink'
          break
        default:
          return ''
          break
      }
    },
    addDetail(id) {
      this.$router.push({ path: '/project', query: { id: id } })
    },
    findinformList() {
      this.pageIndex = 1
      this.loading = true
      let url = CONSTANT.URL.PROJECTS.GETPROJECTSBYPAGE
      let data = {
        pageIndex: 1,
        pageSize: this.pageSize,
        projectName: this.projectName ? this.projectName : null,
        phaseCode: this.phaseCode ? this.phaseCode : null,
        typeCode: this.typeCode ? this.typeCode : null,
        levelCode: this.levelCode ? this.levelCode : null
      }
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData
        this.projectList = data
        this.pageCount = res.data.pageCount
        this.loading = false
        // console.log('所有数据', this.projectList);
      })
    },
    getinformList() {
      this.loading = true
      let url = CONSTANT.URL.PROJECTS.GETPROJECTSBYPAGE
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        projectName: this.projectName ? this.projectName : null,
        phaseCode: this.phaseCode ? this.phaseCode : null,
        typeCode: this.typeCode ? this.typeCode : null,
        levelCode: this.levelCode ? this.levelCode : null
      }
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData
        this.projectList = this.projectList.concat(data)
        this.pageCount = res.data.pageCount
        this.loading = false
        // console.log('所有数据', this.projectList);
      })
    },
    getMoreInform() {
      if (this.pageCount > this.pageIndex && this.loading === false) {
        this.pageIndex++
        this.getinformList()
      }
    }
  },
  created() {}
}
</script>

<style scoped>
#projects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.wrapper {
  min-height: calc(100vh - 210px);
  padding-bottom: 210px;
  background-color: rgba(245, 245, 245, 1);
}
.bottom-bar {
  position: relative;
  left: 0;
  bottom: 0;
  margin-top: -210px;
  clear: both;
}
.main {
  padding-bottom: 42px;
}
.choose-box {
  width: 1200px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.choose-item {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.choose-item .el-input,
.choose-item .el-select {
  width: 160px;
  font-size: 14px;
}
.choose-btn {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: rgba(195, 24, 31, 1);
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
}
.main-box {
  width: 1140px;
  background-color: #fff;
  margin: 0 auto;
  padding: 30px 10px 36px 30px;
}
.main-desc {
  width: 800px;
  height: 15px;
  line-height: 15px;
  margin: 0 auto 8px;
  font-size: 14px;
  color: rgba(195, 24, 31, 1);
  display: flex;
  justify-content: space-between;
}
.desc-item {
  color: rgba(51, 51, 51, 1);
}

.item-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #000;
  display: inline-block;
  margin: 0 5px 0 0;
  vertical-align: text-bottom;
}
.item-icon.red,
.item-state.red {
  background: rgba(195, 24, 31, 1) !important;
}
.red {
  color: rgba(195, 24, 31, 1);
}
.item-icon.orange,
.item-state.orange {
  background: rgba(255, 152, 0, 1) !important;
}
.orange {
  color: rgba(255, 152, 0, 1);
}
.item-icon.blue,
.item-state.blue {
  background: rgba(30, 158, 231, 1) !important;
}
.blue {
  color: rgba(30, 158, 231, 1);
}
.desc-item .bule {
  background: rgba(30, 158, 231, 1) !important;
}
.item-icon.green,
.item-state.green {
  background: rgba(44, 171, 0, 1) !important;
}
.green {
  color: rgba(44, 171, 0, 1);
}
.item-icon.yellow,
.item-state.yellow {
  background: rgba(171, 153, 0, 1) !important;
}
.yellow {
  color: rgba(171, 153, 0, 1);
}
.item-icon.pink,
.item-state.pink {
  background: rgba(234, 28, 198, 1) !important;
}
.pink {
  color: rgba(234, 28, 198, 1);
}
.item-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.item-box {
  width: 260px;
  height: 320px;
  border-radius: 8px 8px 0px 0px;
  margin: 30px 23px 0 0;
  /* border: 1px solid rgba(0,0,0,0.1); */
  font-size: 14px;
  cursor: pointer;
  /* -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,.06); */
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.23);
  box-sizing: border-box;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.item-box:hover {
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

.item-img {
  width: 260px;
  height: 160px;
  background: url(../../assets/project_bg.png) no-repeat 100% 100%;
  background-size: cover;
  position: relative;
  border-radius: 8px 8px 0px 0px;
  -webkit-border-radius: 8px 8px 0px 0px;
}
.item-img .img {
  width: 260px;
  height: 160px;
  border-radius: 8px 8px 0px 0px;
  -webkit-border-radius: 8px 8px 0px 0px;
  background-size: cover;
  background-repeat: no-repeat;
}
.item-img .item-state {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #ffffff !important;
  text-align: center;
  width: 72px;
  height: 35px;
  line-height: 35px;
  background-color: green;
}
.item-msg {
  padding: 7px 8px 3px;
  position: relative;
}
.item-msg .msg-list {
  line-height: 30px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
}
.lv {
  position: absolute;
  top: 6px;
  right: 6px;
}
.lv-icon {
  width: 40px;
  height: 43px;
  /* background: url(../../assets/lv_a.png) no-repeat 100% 100%; */
  /* background-size: cover; */
}
.lv-a {
  background: url(../../assets/lv_a.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-b {
  background: url(../../assets/lv_b.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-c {
  background: url(../../assets/lv_c.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-d {
  background: url(../../assets/lv_d.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}
.lv-s {
  background: url(../../assets/lv_s.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-desc {
  font-size: 14px;
  text-align: center;
  display: inline-block;
  width: 100%;
}
</style>